<template>
  <el-dialog title="抄送其他部门(可多选)" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
      <el-form-item label="选择用户" prop="userIds" required>
        <el-select v-model="ruleForm.userIds" filterable multiple placeholder="选择用户" size="small" style="width: 100%">
          <el-option v-for="(item,index) in users" :key="index" :label="item.nickName" :value="item.userId">
            <span style="float: left">{{ item.nickName }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.deptName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="ruleForm.remarks" type="textarea" size="small" />
      </el-form-item>
      <el-form-item style="text-align: right">
        <el-button type="primary" @click="submitForm()">提交</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { listAllUser } from '@/api/system/sysuser'
import { batchAddCcRecord } from '@/api/process/ccRecord'
export default {
  name: 'CcDailog',
  data() {
    return {
      dialogVisible: false,
      ruleForm: {
        userIds: [],
        remarks: ''
      },
      rules: {
        userIds: [
          { required: true, message: '请选择抄送用户', trigger: 'blur' }
        ]
      },
      users: [],
      workOrder: {}
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name', 'deptName'])
  },
  methods: {
    open(row) {
      this.workOrder = row
      this.userList()
      this.dialogVisible = true
    },
    handleClose() {
      this.resetForm('ruleForm')
      this.ruleForm = {
        userIds: [],
        remarks: ''
      }
      this.workOrder = {}
      this.dialogVisible = false
    },
    async userList(resolve) {
      const res = await listAllUser({})
      this.users = res.data
    },
    submitForm() {
      this.$refs.ruleForm.validate(async valid => {
        const postForm = {
          userIds: this.ruleForm.userIds,
          title: this.workOrder.title,
          work_order: this.workOrder.work_order,
          process_id: this.workOrder.process_id,
          app_type: 'baqsj',
          remarks: this.ruleForm.remarks
        }
        const res = await batchAddCcRecord(postForm)
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '抄送成功!'
          })
          this.handleClose()
        }
      })
    }
  }
}

</script>
<style lang="scss" scoped>
</style>
